<style>
.login_page {
    background: #466bb8;
    position: relative;
}

#login_box {
    width: 400px;
    height: auto;
    position: absolute;
    text-align: center;
}

#login_content {
    background: #fff;
    /*background: #ecf0f1;*/
    padding: 20px;
    margin-top: 10px;
    /*border-bottom: 4px solid #ecf0f1;*/
    border-bottom: 4px solid #bdc3c7;
}
</style>

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'login-form',
    'enableClientValidation'=>true,
    'clientOptions'=>array(
        'validateOnSubmit'=>true,
    ),
    'htmlOptions' => array(
        'class' => 'comments-form',
    )
)); ?>

<div id="login_box">
    <div id="login_logo">
        <img src="<?php echo $this->baseUrl;?>/images/logo.png" alt="">
    </div>
    <div id="login_content">
        <div class="input-prepend">
          <span class="add-on"><i class="icon-user"></i></span>
          <?php echo $form->textField($model,'username',array('placeholder' => 'username','class' => 'span3')); ?>
        </div>

        <div class="input-prepend">
          <span class="add-on"><i class="icon-key"></i></span>
          <?php echo $form->passwordField($model,'password',array('placeholder' => 'password','class' => 'span3')); ?>
        </div>
        <div class="control-group">
            <div class="controls">
                <label for="LoginForm_rememberMe" style="display:inline;"><?php echo $form->checkBox($model,'rememberMe'); ?>Ghi nhớ đăng nhập</label>
                <button class="btn btn-success" type="submit">Đăng nhập</button>
            </div>
        </div>
    </div>
</div>
<?php $this->endWidget(); ?>
<script>
    $(document).ready(function(){
        $('#login_box').center();
        $(window).bind('resize', function(e) {
            e.preventDefault();
            $('#login_box').center({transition:200});
        });
    });
</script>
